<template>
	<view class="selectAddress">

		<div class="container">
			<radio-group  @change="radioChange">
					<div class="radio" v-for="(item,index) of listData" :key="index">
						<radio :value="item.id" :checked="item.is_default==1"/>
						  <div class="radio-left">
							  <div class="name">{{item.consignee}}  {{item.phone}}</div>
							  <div class="address">{{item.province}}{{item.city}}{{item.area}}{{item.address_detail}}</div>
						  </div>
						  <div class="radio-right" @click.stop="toEditorAddress(item.id)">
							  <image src="/static/img/right.png" />
						  </div>
					</div>
			</radio-group>
			
			<div class="address" @click="toEditorAddress">
				<div class="address-left">
					<image src="../../../static/img/address-add.png" class="logo"></image>
					<div class="name">添加地址</div>
				</div>
				<div class="radio-right">
					  <div >
						  <image src="/static/img/right.png" />
					  </div>
				</div>
			</div>
			<div class="btn-submit" v-if="formOrder">
				<div class="btn" @click="buildOrder">
					提交
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formOrder:true,//来自订单选择地址
				radio:'',
				listData:'',
				goodsId:'',//商品id
				addressId:''
			};
		},
		methods:{
			radioChange(e){
				console.log(e)
				this.addressId=e.detail.value
			},
			async getShippingAddress(){
				//获取收货地址
				let params={
					id:'',
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getShippingAddress(params);
				if(res.data.level=='success'){
					this.listData=res.data.data;
					let item=this.listData.find(item=>{
						//获取默认的地址id
						return item.is_default==1
					})
					this.addressId=item.id;
				}
			},
			toEditorAddress(id){
				uni.navigateTo({
					url:`/pages/shop/editorAddress/editorAddress?addressId=${id}`
				})
			},
			async buildOrder(){
				//创建订单
				let params={
					num:1,
					goods_id:this.goodsId,
					address_id:this.addressId,
					user_token:uni.getStorageSync('userToken'),
				}
				let res=await this.$api.buildOrder(params);
				if(res.data.level=='success'){
					this.integralPayment(res.data.data.order_num)
				}else{
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
				}
			},
			async integralPayment(orderNum){
				//提交订单
				let params={
					user_token:uni.getStorageSync('userToken'),
					order_num:orderNum
				}
				let res=await this.$api.integralPayment(params);
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
				if(res.data.level=='success'){
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/shop/orderList/orderList'
						})
					},2000)
				}
			}
		},
		onShow() {
			this.getShippingAddress()
		},
		onLoad(options) {
			this.goodsId=options.goodsId;
			if(options.form=='person'){
				this.formOrder=false
			}
		}
	}
</script>

<style lang="scss">
	@import '~@/static/scss/mixin.scss';
	.selectAddress{
		background-color: #F1F4F7;
		min-height: 100vh;
	}
	.container{
		padding-top: 20rpx;
	}
	.radio{
		@include flex(flex-between);
		background-color: #fff;
		padding:20rpx;
		border-bottom: 1px solid #eee;
		.radio-left{
			margin-left:20rpx;
			flex:1;
			.name{
				font-size:32rpx;
			}
			.address{
				padding:20rpx 0;
				font-size: 24rpx;
				color:rgba(139,141,147,1);
			}
		}
		
	}
	.radio-right{
		image{
			width:28rpx;
			height: 28rpx;
		}
	}
	
	.address{
		@include flex(flex-between);
		background-color: #fff;
		padding:20rpx;
		.address-left{
			flex:1;
			@include flex(flex-start);
			.name{
				margin-left:20rpx;
				font-size:32rpx;
			}
			.logo{
				width:50rpx;
				height: 50rpx;
			}
		}
		.address-right{
			color:rgba(139,141,147,1);
		}
	}
	
	.btn-submit{
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		padding: 20rpx 0;
		background: #fff;
		.btn{
			margin-left:30rpx;
			background: #FFE226;
			font-size:32rpx;
			text-align: center;
			font-weight: 600;
			
			width:calc(100vw - 60rpx);
			border-radius: 16rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>
